<template>
  <div class="check_dress">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>选择地点</p>
       <p></p>
     </header>
      <div class="search_dress">
        <p>
          <img src="../assets/img/searcher.png"/>
          <input type="text" placeholder="请输入七点">
        </p>
      </div>
      <div class="checker">
        <div class="checker_width">
          <div class="maper">
            <img src="../assets/img/maper.png" >
            <span>地图选点</span>
          </div>
          <div class="positioners">
            <img src="../assets/img/loca.png" >
            <span>我的位置</span>
          </div>
        </div>
      </div>
      <div class="history_list">
        <div class="shorter">
          <div class="lefter_1">
              <p><img src="../assets/img/searcher.png"/></p>
              <p>海淀区上地接</p>
            </div>
            <div class="righter_1">
              <img src="../assets/img/rocer.png" >
            </div>
        </div>
        <ul>
          <li>
            <div class="lefter">
              <p><img src="../assets/img/searcher.png"/></p>
              <p>区上地接</p>
            </div>
            <div class="righter">
              <img src="../assets/img/rocer.png" >
            </div>
          </li>
          <li>
            <div class="lefter">
              <p><img src="../assets/img/searcher.png"/></p>
              <p>中关村</p>
            </div>
            <div class="righter">
              <img src="../assets/img/rocer.png" >
            </div>
          </li>
          <li>
            <div class="lefter">
              <p><img src="../assets/img/searcher.png"/></p>
              <p>天安门</p>
            </div>
            <div class="righter">
              <img src="../assets/img/rocer.png" >
            </div>
          </li>
        </ul>
        <div class="clear_history">清除历史记录</div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'check_dress',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.check_dress{
  input {
    border: none;
  }
  height: 100%;
  background: #f2f2f2;
  .font(26,#797979);
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  .search_dress {
    .margin-top(24);
    p {
      .px2rem(height,70);
      width: 92%;
      margin: auto;
      background: #fff;
      display: flex;
      align-items: center;
      img {
        .margin-left(15);
        .px2rem(height,35);
        .px2rem(width,35);
      }
      input {
        .margin-left(15);
      }
    }
  }
  .checker {
    background: #fff;
    .checker_width {
      color: #363636;
      width: 92%;
      margin: auto;
      .px2rem(height,98);
      .margin-top(24);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      .maper {
        display: flex;
        align-items: center;
        img {
          .px2rem(height,42);
          .px2rem(width,42);
        }
        span {
          .margin-left(20);
        }
      }
      .positioners {
        display: flex;
        align-items: center;
        img {
          .margin-right(30);
          .px2rem(width,32);
          .px2rem(height,42);
        }
      }
    }
  }
  .history_list {
    background: #fff;
    .margin-top(26);
    .padding-bottom(54);
    .shorter {
      .px2rem(height,108);
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .border-bottom(2,solid,#eaeaea);
      .lefter_1 {
          padding-left: 4%;
          display: flex;
          justify-content: space-between;
          p:nth-child(1){
            img {
              .px2rem(width,35);
              .px2rem(height,35);
            }
          }
          p:nth-child(2){
            .margin-left(38);
          }
        }
        .righter_1 {
          padding-right: 4%;
          img {
            .px2rem(width,31);
            .px2rem(height,31);
          }
        }
    }
    ul {
      width: 92%;
      margin: auto;
      li {
        .px2rem(height,96);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lefter {
          width: 100%;
          display: flex;
          height: 100%;
          align-items: center;
          p:nth-child(1){
            img {
              .px2rem(width,35);
              .px2rem(height,35);
            }
          }
          p:nth-child(2){
            width: 100%;
            .margin-left(38);
            .line-height(96);
            .border-bottom(1,solid,#eaeaea);
          }
        }
        .righter {
          .margin-left(30);
          img {
            .px2rem(width,31);
            .px2rem(height,31);
          }
        }
      }
    }
    .clear_history {
      .line-height(46);
      width: 20%;
      .border(1,solid,#ccc);
      .font(20,#c7c7c7);
      text-align: center;
      margin: auto;
      .margin-top(54);
    }
  }
}
</style>
